
import React,{Component} from "react";
import { Form, Input, Button, message  } from "antd";
import ajax from "../../ajaxMethod";
import  NodeRSA from 'node-rsa';
import config from "../../config";

class ChangePassword extends Component{
    constructor(props){
        super(props);
        this.state = {
            username:localStorage.getItem("username"),
        }
    }
    handleValidatorNowPassword = (rule, val, callback) =>{
        if(val){
            if(val.length < 4 || val.length > 32){
                callback("请输入4-32位字符的密码");
            }
        }
    }
    handleValidatorPassword = (rule, val, callback) =>{
        if(val){
            if(val.length < 4 || val.length > 32){
                callback("请输入4-32位字符的密码");
            }
            if(val === this.props.form.getFieldValue("nowPassWord")){
                callback("新密码不能和旧密码相同");
            }
        }
    }
    handleValidatorRePassword = (rule, val, callback) =>{
        let password = this.props.form.getFieldValue("password");
        if(val !== password){
            callback("两次输入密码需要相同");
        }
    }
    onSubmit = (e) =>{
        let values = this.props.form.getFieldsValue(),
            flag = false,
            _this = this,
            jsenc = new NodeRSA(config.publicKey);//设置公共匙
        for(let item in values){
            if(!item){
                flag = true;
                break;
            }
        }
        if(flag){
            message.warning("请输入所有信息");
        }else{
            values.username = this.state.username;
            values.nowPassWord = jsenc.encrypt(values.nowPassWord, 'base64');
            values.password = jsenc.encrypt(values.password, 'base64');
            delete values.rePassword;

            ajax.postAjax("/interface/changePassword", values, res=>{
                if(res.success){
                    if(res.data.state === 0){
                        message.error("用户历史密码错误");
                    }else{
                        message.success("修改成功");
                        _this.props.form.resetFields();
                    }
                }else{
                    console.error(res.description);
                    message.error(res.description);
                }
            }, err=>{
                console.error(err);
            })
        }
        e.preventDefault();
    }
    render(){
        const state  = this.state;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
        };
        const {getFieldProps, getFieldDecorator} = this.props.form;
        return(<div className="change-password">
            <Form onSubmit={this.onSubmit}>
                <Form.Item
                {...formItemLayout}
                label="当前密码"
                >
                    <Input.Password 
                        placeholder='请输入当前密码' 
                        visibilityToggle={false} 
                        {...getFieldProps('nowPassWord', {
                            rules: [
                                {required: true, message: '请输入4-32位字符的密码' },
                                {validator: this.handleValidatorNowPassword }
                            ],
                        })}/>
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    label="新密码"
                >
                    <Input.Password 
                        placeholder='请输入4-32位的密码' 
                        visibilityToggle={false} 
                        {...getFieldProps('password', {
                            rules: [
                                {required: true, message: '请输入4-32位字符的密码' },
                                {validator: this.handleValidatorPassword }
                            ],
                        })}/>
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    label="重复密码"
                >
                    <Input.Password 
                        placeholder='请重复输入密码' 
                        visibilityToggle={false} 
                        {...getFieldProps('rePassword', {
                            rules: [
                                {required: true, message: '请重复输入密码' },
                                {validator: this.handleValidatorRePassword },
                            ],
                        })}/>
                </Form.Item>
                <Button type="primary" htmlType="submit">提交</Button>
            </Form>
        </div>)
    }
}
export default Form.create({})(ChangePassword);